<template>
	<view class="content">
		<view class="recommend">
			<view class="recommend-list">
				<view class="recommend-list-item" v-for="(item, i) in typeList" :key="i" @click="checkDetails(item)">
					<image class="item-image" :src="item.imgUrl"></image>
					<view class="item-text">
						<view class="item-title">{{item.title}}</view>
						<view class="item-data">
							<view class="total">
								<image class="total-icon" src="../../static/image/total.png"></image>
								<view>{{item.total}}</view>
							</view>
							<view class="viewers">
								<image class="viewers-icon" src="../../static/image/viewer.png" mode=""></image>
								<view>{{item.viewers}}</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	
	<!-- <ad adpid="128919280812" @load="onload" @close="onclose" @error="onerror"></ad> -->
	</view>
</template>

<script>
	import { mapState } from 'vuex'
	import { history, geography, botany, animal } from '../../utils/type.js'
	export default {
		data() {
			return {
				typeId: 1,
				typeList: []
			}
		},
		// computed: {
		// 	typeList() {
		// 		let obj = {1: history, 2: geography, 3:botany, 4:animal}
		// 		return obj[this.typeId] || history
		// 	}
		// },
		onLoad(ops) {
			this.typeId = ops.baseId
			uni.setNavigationBarTitle({
				title: ops.title
			})
			this.$http.getTypeList({id: this.typeId}).then((res) => {
				console.log(res)
				this.typeList = res
			})
		},
		methods: {
			checkDetails(item) {
				uni.navigateTo({
					url: "/pages/answerDetails/answerDetails?baseId=" + item.typeId + '&subjectId=' + item.id + '&title=' + item.title
				})
			},
		}
	}
</script>

<style scoped lang="scss">
	.content{
		padding: 0 25rpx;
	}
  .recommend{
		.recommend-list{
			display: flex;
			justify-content: space-between;
			flex-wrap: wrap;
			padding-top: 40rpx;
			.recommend-list-item{
				display: flex;
				flex-direction: column;
				margin-bottom: 30rpx;
				box-shadow: 0rpx 0rpx 26rpx #ccc;
				border-radius: 20rpx;
				overflow: hidden;
				.item-text{
					padding: 10rpx 10rpx 20rpx;
				}
				.item-image{
					width: 338rpx;
					height: 400rpx;
				}
				.item-data{
					display: flex;
					align-items: center;
					justify-content: space-between;
					margin-top: 10rpx;
					.viewers, .total{
						display: flex;
						align-items: center;
						font-size: 30rpx;
						color: #bbbbbb;
					}
					.total-icon{
						width: 40rpx;
						height: 40rpx;
						margin-right: 10rpx;
					}
					.viewers-icon{
						width: 48rpx;
						height: 48rpx;
						margin-right: 10rpx;
					}
				}
			}
		}
	}
</style>
